<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="h1">hello</h1>
    <script>
      /*
    1. insertAdjacent* 兼容好，老版本浏览器也能运行
    2. 需要两个参数，第一个参数表示插入的位置，第二个参数表示插入的内容
    3. insertAdjacentHTML 支持html文本插入，并且解析html
    3. insertAdjacentHTML 支持html文本插入，并且解析html
    3. insertAdjacentText 支持文本插入，原样展示html内容
    */
      const h1 = document.getElementById("h1");
      const b = document.createElement("b");
      b.innerHTML = "jack";
      //   h1.insertAdjacentElement("afterbegin", b);
      //   h1.insertAdjacentElement("beforeend", b);

      //   h1.insertAdjacentElement("beforebegin", b);
      //   h1.insertAdjacentElement("afterend", b);

      //   h1.insertAdjacentHTML("afterend", "<b>jack</b>"); // innerHTML
      h1.insertAdjacentText("afterend", "<b>jack</b>"); // textContent
    </script>
  </body>
</html>
